<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4655802_yzk96ikjbe.css">
    <style>
#denglu{
    width: 500px;
    height: 30px;
    display: flex;
    font-size: 20px;
    justify-content: center;
    margin-bottom: 40px;
}
#mimadenglu{
    border-right: 1px solid rgb(204, 203, 203);
    padding-right: 20px;
}
#duanxindenglu{
    padding-left: 20px;
}
.shuruzhanghao{
    width: 500px;
    height: 50px;
    border: 1px solid rgb(204, 203, 203);
    border-radius: 10px 10px 0 0;
}
.shurumima{
    width: 500px;
    height: 50px;
    border: 1px solid rgb(204, 203, 203);
    border-top: none;
    border-radius: 0 0 10px 10px;
    z-index: 100;
    position: absolute;
}
.a1{
    width: 80px;
    height: 50px;
    display:inline-block;
    line-height: 50px;
    text-align: center;
}
input{
    outline: none;
    border: none;
    width: 200px;
}
.dianji{
    width: 500px;
    height: 40px;
    margin-top: 70px;
    display: flex;
    justify-content: space-between;
}
.dianji2{
    width: 500px;
    height: 40px;
    margin-top: 70px;
    display: flex;
    justify-content: center;
}
#zhucheBtn,#dengluBtn,#dengluzhuceBtn{
    width: 220px;
    height: 40px;
    border: 1px solid rgb(204, 203, 203);
    text-align: center;
    line-height: 40px;
    border-radius: 10px;
}
.blue{
    color: white;
    background-color: #5cb3fa;
}
.gray{
    background-color: #a7d7ff;
}
.bl{
    color:#5cb3fa;
}
#yanjing{
    width: 120px;
    height: 50px;
    line-height: 50px;
    float: right;
    margin-right: 30px;
}
#yanjing span:hover{
    color: #5cb3fa;
}
#forget{
    color: #42a9fd;
    margin-left: 10px;
}

.disabled{
    background-color: #5cb5fe;
}
select{
    border: none;
    outline: none;
    border-radius: 10px;
}
option{
    width: 100px;
    height: 20px;
    padding: 0 20px;
    background-color: #42a9fd;
}
#x1{
    margin: 0 40px;
    padding: 20px 20px ;
}
.b1{
    background-color: rgb(255, 255, 255);
    width: 200px;
    z-index: 200;
    position: absolute;
    border-radius: 10px;
    border: 1px solid rgb(243, 243, 243);
    
}
.fl{
    float: left;
}
.fr{
    float: right;
}
.icon-mima-biyan{
    margin-right: 12px;
}
#yanzhengma{
    width: 100px;
    height: 30px;
    border-left: 1px solid rgb(193, 193, 193);
    float:right;
    margin: 10px 40px 10px 0;
}
button{
    border: none;
    background-color: white;
    color: gainsboro;
}
    </style>
</head>
<body>
    <div id="app">
        <div id="denglu">
            <div id="mimadenglu" @click="a=0" :class="{'bl':a===0}">密码登录</div>
            <div id="duanxindenglu" @click="a=1" :class="{'bl':a===1}">短信登录</div>
        </div>
        <div id="mima" v-if="a===0">
        <div class="shuruzhanghao">
          <span class="a1">账号</span>
          <input type="text" placeholder="请输入账号" v-model="zhanghao">
        </div>
        <div class="shurumima">
            <span class="a1">密码</span>
            <input :type="inputType" placeholder="请输入密码" v-model="mima">
            <div id="yanjing" >
                <span @click="inputType = inputType ==='password'?'text':'password'" >
<span  v-if="inputType==='password'" class="iconfont icon-mima-biyan"></span>
<span v-if="inputType==='text'" class="iconfont icon-mima-zhengyan"></span>
</span>
<span id="forget">忘记密码？</span>
            </div>
        </div>
        <div class="dianji">
            <div id="zhucheBtn" @click="a=1">
注册
            </div>
            <div id="dengluBtn" class="gray" :class="{disabled:zhanghao && mima}">
登录
            </div>
        </div>
    </div>
    <div id="duanxin" v-if="a===1">
        <div class="shuruzhanghao">
            <!-- <span class="a1">+86</span> -->
            
            <span @click="selectOpen=!selectOpen" class="a1">{{num[activeSelectIndex].haoma}}</span>
	

            <!-- <select name="" id="" v-model="val" class="a1">
	
                <option  value="1"><span id="x1">中国大陆</span><span>+86</span> </option>
                <option value="2">选择2</option>
                <option value="3">选择3</option>
                <option value="4">选择4</option>
            </select> -->
            <input type="text" placeholder="请输入手机号" v-model="phoneNumber" @input="code" >
            <!-- <div id="yanzhengma" :class="{blue:isPhoneNumberValid}">获取验证码</div> -->
            <button :class="{'bl': manzu}" id="yanzhengma">获取验证码</button>
            <div v-show="selectOpen" class="b1">
                <p v-for="(item,index) in num" @click="activeSelectIndex=index,selectOpen=false" >
                    <span >{{item.name}}</span><span class="fr">{{item.haoma}}</span></p>
            </div>
          </div>
          <div class="shurumima">
              <span class="a1">验证码</span>
              <input type="text" placeholder="请输入验证码"  v-model="inputValue" @input="Input">
          </div>
        <div class="dianji2">
            <div id="dengluzhuceBtn" class="blue">
                登录/注册
                            </div>
        </div>
        </div>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    const {createApp,ref}= Vue;
    createApp({
        setup(){
          let a=ref(0);
          const inputType = ref('password') ;
          let zhanghao=ref('');
          let mima=ref('');
          let val = ref(1);
          const activeSelectIndex = ref(0)
			   const selectOpen = ref(false)
               let activeIndex = ref(0)
	
	const num =  ref([{
		  name:"中国大陆",
		  haoma:"+86"
	},
	{
		  name:"中国香港特别行政区",
		  haoma:"+852"
	},
    {
		  name:"中国香港特别行政区",
		  haoma:"+853"
	},
    {
		  name:"中国台湾",
		  haoma:"+886"
	},
    {
		  name:"美国",
		  haoma:"+1"
	},
    {
		  name:"比利时",
		  haoma:"+32"
	},
	
]);
let phoneNumber = ref('');

function code(){
  const regex =  /^1[3456789]\d{9}$/;
  if (regex.test(phoneNumber.value)) {
    manzu.value = true;
  } else {
    manzu.value = false;
  }
};
let manzu= ref(false);
let inputValue = ref('');

const Input = (event) => {
  const input = event.target.value;
  if (input.length > 6) {
    inputValue.value = input.slice(0, 6);
  } else {
    inputValue.value = input;
  }
};
function main(){
     return   zhanghao.value && mima.value;
 } 
           return{
           a,
           inputType,
           zhanghao,
           mima,
           main,
           val,
           num,
           activeIndex,
           activeSelectIndex,
           selectOpen,
           phoneNumber,
          code,
          manzu,
          inputValue,
          Input
           }
        }
    }).mount('#app')
</script>
</html>